<template>
  <div class="pieChart">
    <!--  柱形图  -->
    <span class="posTit">采购员交期合格表</span>
    <div id="barChart" ref="barChart" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { queryPoorderRankingList } from '@/api/homePageNew/salesman'

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
])
export default {
  data() {
    return {
      product: [], // 2015 2016
      allPrice: []
    }
  },
  created() {
    this.querySalerRankTable()
  },
  methods: {
    querySalerRankTable() {
      queryPoorderRankingList({}).then(res => {
        res.data.forEach(item => {
          this.allPrice.push(item.percentage)
          this.product.push(item.months)
        })
        this.drawLine()
      })
    },
    // 模板
    drawLine() {
      // // 基于准备好的dom，初始化echarts实例
      const barChart = echarts.init(document.getElementById('barChart'))
      // 绘制图表
      barChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.product
        },
        yAxis: {
          min: 0,
          max: 100,
          name: '百分比(%)',
          type: 'value'
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{
          data: this.allPrice,
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          }
        }]
      })
    }
  }
}
</script>

<style scoped lang="scss">
#barChart {
  width: 100%;
  height: 400px;
}
.posTit {
  color: #4c4c4c;
  font-size: 18px;
  font-weight: 600;
  position: absolute;
  top: 0;
}
</style>
